<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文章列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/public/static/admin/css/oksub.css">
<!--	<script type="text/javascript" src="/public/admin/lib/loading/okLoading.js"></script>-->
</head>
<body>

<br>
<div class="layui-btn-group">
	<button class="layui-btn" id="btn-expand">全部展开</button>
	<button class="layui-btn" id="btn-fold">全部折叠</button>
	<button class="layui-btn" id="btn-refresh">刷新表格</button>
	<button class="layui-btn layui-btn-normal"id="btn-father">添加父级</button>
</div>
<table id="table1" class="layui-table" lay-filter="table1"></table>
</div>
<!-- 操作列 -->
<script type="text/html" id="oper-col">
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加子级</a>
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="/public/static/admin/lib/layui/layui.js"></script>
<script>
	layui.config({
		base: ''
	}).extend({
		treetable: '/public/static/admin/lib/layui/lay/modules/treetable-lay/treetable'
	}).use(['layer', 'table', 'treetable',"element", "table", "form", "laydate", "okLayer", "okUtils", "okMock"], function () {
		var $ = layui.jquery;
		var table = layui.table;
		var layer = layui.layer;
		var treetable = layui.treetable;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;
		let okMock = layui.okMock;
		// 渲染表格
		var renderTable = function () {
			layer.load(2);
			treetable.render({
				treeColIndex: 1,
				treeSpid: 0,
				treeIdName: 'cate_id',
				treePidName: 'cate_pid',
				treeDefaultClose: true,
				treeLinkage: false,
				elem: '#table1',
				url:okMock.api.listTree,
				page: false,
				cols: [[
					{field: 'cate_id', title: 'ID', width: 100, sort: true},
					{field: 'cate_name', title: '栏目名称'},
					// {field: 'cate_pid', title: 'pid'},
					{templet: '#oper-col', title: '操作'}
				]],
				done: function () {
					layer.closeAll('loading');
				}
			});
		};

		renderTable();

		$('#btn-expand').click(function () {
			treetable.expandAll('#table1');
		});

		$('#btn-fold').click(function () {
			treetable.foldAll('#table1');
		});

		$('#btn-refresh').click(function () {
			renderTable();
		});
		$('#btn-father').click(function () {
			addFater();
		});

		//监听工具条
		table.on('tool(table1)', function (obj) {
			var data = obj.data;
			var layEvent = obj.event;

			if (layEvent === 'del') {
				del(data.id);
			} else if (layEvent === 'edit') {
				layer.msg('修改' + data.id);
			}else if (layEvent === 'add') {
				add(data.id);
			}
		});
		//新增
		function add(id) {
			okLayer.open("添加栏目", "addCl.html?id="+id, "90%", "90%", null, function () {
				renderTable();
			})
		}

		function addFater() {
			okLayer.open("添加栏目", "addCl.html?id="+-1, "90%", "90%", null, function () {
				renderTable();
			})
		}

		//删除
		function del(id) {
			okLayer.confirm("确定要删除吗？", function (index) {
					okUtils.ajax("Column/delCl", "put", {id: id}, true).done(function (response) {
						renderTable();
						okUtils.tableSuccessMsg(response.msg);
					}).fail(function (error) {
						console.log(error)
					});
		}

			)}


	});
</script>
</body>
</html>
